<template>
  <article class="article d-flex ai-center px-3" @click="$router.push('/ArticleDetails/1')">
    <div class="articleimg mr-3">
      <img src="@/assets/images/test.jpg" alt="文章图片">
    </div>
    <div class="articlecontent d-flex flex-column">
      <div class="title d-flex jc-between ai-center">
        <a href="https://www.jensonhui.top/archives/19.html" class="text-primary articletitle ">
          <h3 class="text-1">Git常用命令总结</h3>
        </a>
        <span class="fs-sm  d-flex ai-center">
            <i class="iconfont icon-shalou  mr-2"></i>
            2020-10-30
        </span>
      </div>
      <p class="mt-0 text-2">
          Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目；GitGit是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目；Git 是 Linus Torvalds 为了帮助管理 L...
      </p>
    </div>
  </article>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.article {
  position: relative;
  height: 9.375rem;
  .articleimg {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #dadada;
    flex-shrink: 0;
  }
  .articlecontent {
      .articletitle{
          max-width: 31.25rem;
      }
      
  }
}
.article:after {
  content: '';
  position: absolute;
  bottom: 0;
  left:0;
  transform: translateX(50%);
  width: 50%;
  border-bottom: 1px solid #efefef;
}
</style>